import React, { Component, useRef } from 'react'
import GoBack from '@/components/TheGoBack'
import _ from 'lodash'
import TheButton from "@/components/TheButton";
import TheTable from "@/components/TheTable";
import ThePagination from "@/components/ThePagination";
import { apiGetExchangeInfoPage, apiGetExchangeInfoList, apiGetCouponInfoView } from '@/request/coupons'
import { exportTable } from '@/utils/exportTable.js'
import { apiGetCouponByIdListView } from '@/request/couponManagement'

export default class CDKList extends Component {

    state = {
        columns_coupon: [
            {
                title: "优惠券名称",
                dataIndex: "couponTitle",
                key: "couponTitle",
                render: (text, record) => {
                    return <div className="p-white-space" >{record.couponTitle}</div>
                }
            },
            // {
            //     title: "适用范围",
            //     dataIndex: "couponTitle",
            //     key: "couponTitle",
            //     render: (text, record) => {
            //         return <div className="p-white-space" >{record.couponTitle}</div>
            //     }
            // },
            {
                title: "优惠券类型",
                dataIndex: "couponType",
                key: "couponType",//H兑换券 J满减券 Z满折券 D打车券
                render: (text, record) => {
                    let label = ''
                    switch (text) {
                        case 'J':
                            label = '代金券';
                            break;
                        case 'Z':
                            label = '折扣券';
                            break;
                        case 'D':
                            label = '打车券';
                            break;
                    }
                    return label;
                },
            },
            {
                title: "面值",
                dataIndex: "couponPrice",
                key: "couponPrice",
                render: (text, record) => {
                    if (record.couponType === 'J' || record.couponType === 'D') {
                        return <React.$Price price={record.couponPrice} />
                    }
                    if (record.couponType === 'Z') {
                        return `${React.$transNum(record.couponPrice, 1, -1)}折`
                    }
                }
            },
            {
                title: "有效期",
                dataIndex: "effectiveTime",
                key: "effectiveTime",
                render: (text, record) => {
                    if (record.timeType === 1 || record.timeType === 2) {
                        return <div>{record.effectiveTime}天</div>
                    }
                    // return <div>{`${record.validityBeginDate} ${record.useBeginTime}`} 至 {`${record.validityEndDate} ${record.useEndTime}`}</div>
                    return <div>{`${record.startTime}`} 至 {`${record.endTime}`}</div>
                }
            },
            {
                title: '优惠券状态',

                dataIndex: "couponStatus",
                key: "couponStatus",
                render: (text, record) => {
                    let txt = record.couponStatus !== 'Y' ? '禁用' : '启用'
                    return <div>{txt}</div>
                }
            },
            {
                title: "领取数量",
                dataIndex: "receiveCount",
                key: "receiveCount",

            }, {
                title: "使用数量",
                dataIndex: "useCount",
                key: "useCount",

            }
        ],
        data_coupon: [],
        columns_CDK: [
            {
                title: "CDK",
                dataIndex: "cdkey",
                key: "cdkey",
                render: (text, record) => {
                    return <div className="p-white-space" >{record.cdkey}</div>
                }
            },
            {
                title: "领取用户",
                dataIndex: "nickName",
                key: "nickName",
                render: (text, record) => {
                    return <div className="p-white-space" >{record.nickName}</div>
                }
            },
            {
                title: "兑换时间",
                dataIndex: "exchangeDate",
                key: "exchangeDate",
                render: (text, record) => {
                    return <div className="p-white-space" >{record.exchangeDate}</div>
                }
            },
            {
                title: '使用时间',
                dataIndex: "verificationTime",
                key: "verificationTime",
                render: (text, record) => {
                    return <div className="p-white-space" >{record.verificationTime}</div>
                }
            }
        ],
        data_CDK: [],
        pageData: {
            pageNo: 1,
            pageSize: 10
        },
        total: 0,
        loading: false,
        exchangeValue: ''

    }
    componentDidMount() {
        let id = this.props.match.params.id
        this.setState({ exchangeValue: id, loading: true }, async () => {
            await this.getView(id)
            await this.initData(this.state.pageData)
            this.setState({
                loading: false
            })
        })

    }
    async getView(couponId) {
        let res = await apiGetCouponInfoView({ couponId })
        // let res = await apiGetCouponByIdListView( couponId )
        if (res.code === 0) {
            let data_coupon = [
                {
                    couponTitle: res.data.couponTitle,
                    couponType: res.data.couponType,
                    couponPrice: res.data.couponPrice,
                    effectiveTime: res.data.effectiveTime,
                    couponStatus: res.data.couponStatus,
                    timeType:res.data.timeType,
                    startTime:res.data.startTime,
                    endTime:res.data.endTime,
                    useCount:res.data.useCount,
                    receiveCount:res.data.receiveCount
                }
            ]
            console.log(res.data)
            this.setState({
                data_coupon
            })
        }
    }
    async initData({ pageNo, pageSize }) {
        let res = await apiGetExchangeInfoPage({ pageNo, pageSize, exchangeValue: this.state.exchangeValue, passKeyType: 0 })
        if (res.code === 0) {
            let data_CDK = res.data.map(item => {
                return {
                    cdkey: item.cdkey ? item.cdkey : '/',
                    nickName: item.nickName ? item.nickName : '/',
                    exchangeDate: item.exchangeDate ? item.exchangeDate : '/',
                    verificationTime: item.verificationTime ? item.verificationTime : '/'

                }
            })
            this.setState({
                data_CDK: data_CDK,
                total: res.totalCount,
                pageData: {
                    pageNo: pageNo,
                    pageSize: pageSize
                }
            })

        }
    }
    pageChange = (pageNo, pageSize) => {
        this.setState({
            pageData: {
                pageNo, pageSize
            }
        }, () => {
            this.initData({ pageNo, pageSize })
        })
    };
    async exportExcel() {
        const res = await apiGetExchangeInfoList({ exchangeValue: this.state.exchangeValue,exchangeType:0})
        if (res.code === 0) {
            let tH = [{ prop: 'cdkey', title: 'CDK' }, { prop: 'nickName', title: '领取用户' }, { prop: 'exchangeDate', title: '兑换时间' }, { prop: 'verificationTime', title: '使用时间' }]
            let tB = res.data.map(item => {
                return {
                    nickName: item.nickName ? item.nickName : '/',
                    exchangeDate: item.exchangeDate ? item.exchangeDate : '/',
                    verificationTime: item.verificationTime ? item.verificationTime : '/',
                    cdkey: item.cdkey ? item.cdkey : '/'

                }
            })
            exportTable(tH, tB,'CDK列表')
        } else {
            React.$message({
                type: 'warning',
                content: '导出失败'
            })
            return false
        }

    }
    render() {
        const { columns_coupon, columns_CDK, data_CDK, data_coupon, pageData: { pageNo, pageSize }, total, loading } = this.state
        return (
            <div className="p-layout-box">
                <GoBack history={this.props.history} title="CDK列表" />
                <div >
                    <div style={{ margin: "10px 0", fontSize: 16, fontWeight: 600 }}>优惠券信息</div>
                    <TheTable columns={columns_coupon} dataSource={data_coupon} loading={loading} />
                </div>
                <div >
                    <div style={{ margin: "10px 0", fontSize: 16, fontWeight: 600 }}>CDK列表({total})
                        {
                            total ? <TheButton onClick={() => this.exportExcel()}>Excel导出</TheButton> : null
                        }

                    </div>
                    <div className="">

                        <TheTable scroll={{ x: "max-content", y: '45vh' }} columns={columns_CDK} dataSource={data_CDK} loading={loading} />
                        <ThePagination pageNo={pageNo} pageSize={pageSize} total={total} pageChange={this.pageChange} />
                    </div>
                </div>
            </div>
        )
    }
}
